<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head th:replace="fragments/head :: commonHead('风险响应计划列表')">
    <!-- 页面特定样式将由通用头部替代 -->
</head>
<body>
    <div class="container mt-4">
        <div class="row mb-3">
            <div class="col">
                <h2>风险响应计划列表</h2>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a th:href="@{/}" class="text-decoration-none">首页</a></li>
                        <li class="breadcrumb-item"><a th:href="@{/risk/list}" class="text-decoration-none">风险列表</a></li>
                        <li class="breadcrumb-item"><a th:href="@{/risk/{id}(id=${risk.id})}" class="text-decoration-none">风险详情</a></li>
                        <li class="breadcrumb-item active" aria-current="page">响应计划列表</li>
                    </ol>
                </nav>
            </div>
        </div>
        
        <div class="row mb-3">
            <div class="col">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">风险信息</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <p><strong>风险标题：</strong> <span th:text="${risk.title}"></span></p>
                                <p><strong>风险类型：</strong> 
                                    <span th:if="${risk.type == 1}">技术风险</span>
                                    <span th:if="${risk.type == 2}">管理风险</span>
                                    <span th:if="${risk.type == 3}">商业风险</span>
                                    <span th:if="${risk.type == 4}">外部风险</span>
                                </p>
                                <p th:if="${risk.level != null}"><strong>风险级别：</strong> 
                                    <span th:if="${risk.level == 1}">低</span>
                                    <span th:if="${risk.level == 2}">中</span>
                                    <span th:if="${risk.level == 3}">高</span>
                                </p>
                            </div>
                            <div class="col-md-6">
                                <p><strong>状态：</strong>
                                    <span th:if="${risk.status == 1}" class="badge badge-secondary">已识别</span>
                                    <span th:if="${risk.status == 2}" class="badge badge-primary">已分析</span>
                                    <span th:if="${risk.status == 3}" class="badge badge-info">已计划</span>
                                    <span th:if="${risk.status == 4}" class="badge badge-warning">已处理</span>
                                    <span th:if="${risk.status == 5}" class="badge badge-success">已解决</span>
                                </p>
                                <p><strong>项目：</strong> <span th:text="${risk.projectName}"></span></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row mb-3">
            <div class="col">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">响应计划列表</h5>
                        <a th:href="@{/risk-response/add(riskId=${risk.id})}" class="btn btn-sm btn-success" sec:authorize="hasAnyRole('ADMIN', 'MANAGER')">
                            <i class="fa fa-plus"></i> 添加响应计划
                        </a>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>计划名称</th>
                                        <th>负责人</th>
                                        <th>计划开始时间</th>
                                        <th>计划结束时间</th>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr th:if="${responses.empty}">
                                        <td colspan="7" class="text-center">暂无响应计划</td>
                                    </tr>
                                    <tr th:each="response, stat : ${responses}">
                                        <td th:text="${stat.count}"></td>
                                        <td th:text="${response.name}"></td>
                                        <td th:text="${response.responsibleName}"></td>
                                        <td th:text="${#dates.format(response.expectedStartTime, 'yyyy-MM-dd HH:mm')}"></td>
                                        <td th:text="${#dates.format(response.expectedEndTime, 'yyyy-MM-dd HH:mm')}"></td>
                                        <td>
                                            <span th:if="${response.status == 1}" class="badge badge-secondary">未开始</span>
                                            <span th:if="${response.status == 2}" class="badge badge-primary">进行中</span>
                                            <span th:if="${response.status == 3}" class="badge badge-success">已完成</span>
                                            <span th:if="${response.status == 4}" class="badge badge-danger">已逾期</span>
                                        </td>
                                        <td>
                                            <div class="btn-group btn-group-sm">
                                                <a th:href="@{/risk-response/{id}(id=${response.id})}" class="btn btn-info" title="详情">
                                                    <i class="fa fa-eye"></i>
                                                </a>
                                                <a th:href="@{/risk-response/edit/{id}(id=${response.id})}" class="btn btn-primary" sec:authorize="hasAnyRole('ADMIN', 'MANAGER')" title="编辑">
                                                    <i class="fa fa-edit"></i>
                                                </a>
                                                <button type="button" class="btn btn-danger" th:onclick="'confirmDelete(' + ${response.id} + ')'" sec:authorize="hasAnyRole('ADMIN', 'MANAGER')" title="删除">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row">
            <div class="col">
                <a th:href="@{/risk/{id}(id=${risk.id})}" class="btn btn-secondary">
                    <i class="fa fa-arrow-left"></i> 返回风险详情
                </a>
            </div>
        </div>
    </div>
    
    <!-- 删除确认模态框 -->
    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">确认删除</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>确定要删除此响应计划吗？此操作不可恢复！</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" id="confirmDeleteBtn" class="btn btn-danger">删除</button>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    <script th:inline="javascript">
        let responseIdToDelete = null;
        
        // 确认删除对话框
        function confirmDelete(responseId) {
            responseIdToDelete = responseId;
            $('#deleteModal').modal('show');
        }
        
        $(document).ready(function() {
            // 删除响应计划
            $('#confirmDeleteBtn').click(function() {
                if (responseIdToDelete) {
                    $.ajax({
                        url: '/risk-management/risk-response/delete/' + responseIdToDelete,
                        type: 'POST',
                        success: function(response) {
                            if (response.code === 200) {
                                // 关闭模态框
                                $('#deleteModal').modal('hide');
                                // 重新加载页面
                                location.reload();
                            } else {
                                alert(response.message || '删除失败');
                            }
                        },
                        error: function() {
                            alert('系统错误，请稍后再试');
                        }
                    });
                }
            });
        });
    </script>
</body>
</html> 